<!-- 管理业首页的列表 -->
<style lang="less" scoped>
.index-swiper {
  height: 3.2rem;
  background-image: url(~images/bg/line-bj.png);
  background-size: cover;
  .swiper-pagination-bullets {
    bottom: 0.2rem;
  }
}
</style>
<template>
  <div class="contain">
    <div class="swiper-container index-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="is-head"><p class="range">今日</p></div>
          <ul class="is-list cf">
            <li>
              <p>{{dayStatistics.DetailSum}}</p>
              <span>总金额（元）</span>
            </li>
            <li>
              <p>{{dayStatistics.Qty}}</p>
              <span>订单数（单）</span>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <div class="is-head"><p class="range">本周</p></div>
          <ul class="is-list">
            <li>
              <p>{{weekStatistics.DetailSum}}</p>
              <span>总金额（元）</span>
            </li>
            <li>
              <p>{{weekStatistics.Qty}}</p>
              <span>订单数（单）</span>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <div class="is-head"><p class="range">本月</p></div>
          <ul class="is-list">
            <li>
              <p>{{monthStatistics.DetailSum}}</p>
              <span>总金额（元）</span>
            </li>
            <li>
              <p>{{monthStatistics.Qty}}</p>
              <span>订单数（单）</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="bus-ana-tit mt30">订单分析</div>
    <div class="bus-ana-table">
      <ul class="tr-header cf">
        <li></li>
        <li>客户数</li>
        <li>金额(元)</li>
        <li>品种数</li>
        <li>数量</li>
      </ul>
      <ul class="tr-body cf" v-for="item in orderAnalysis">
        <li>{{item.tiemtype}}</li>
        <li>{{item.CustomerNumbers}}</li>
        <li>{{item.Amount}}</li>
        <li>{{item.VarietiesNumbers}}</li>
        <li>{{item.OrderNumbers}}</li>
      </ul>
    </div>
    <div class="bus-ana-tit">销量分析<span class="more" v-if="classfiy==1" @click="goList">查看更多</span></div>
    <div class="is-tab">
      <div class="register-tab displayflex">
        <label class="label flex1">
          <input type="radio" name="card" value="1" v-model="classfiy">
          <span class="txt">业务员</span>
        </label>
        <label class="label flex1">
          <input type="radio" name="card" value="2" v-model="classfiy">
          <span class="txt">客户</span>
        </label>
      </div>
    </div>
    <div class="chart-box">
      <div id="anaCharts" class="is-echart" :class="{'cur':classfiy==1}"></div>
      <div id="cirCharts" class="is-echart zindex" :class="{'cur':classfiy==2}"></div>
    </div>
    <manage-footer :status='1'></manage-footer>
  </div>
</template>

<script>
import echarts from "$static/echarts/echarts.common.min.js";
import manageFooter from "@/components/core/footer/manage.footer.vue";
import Swiper from '$static/swiper/swiper-3.4.2.min.js';
export default {
  name:'rank',
  components: {
    manageFooter
  },
  data() {
    return {
      classfiy: "1",
      orderAnalysis: [],
      dayStatistics: [],
      monthStatistics: [],
      weekStatistics: [],
      BuyerBill: [],
      BuyerAmount: [],
      BuyerName: [],
      CusData: [],
      // showBig:false,
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.swiper();
      this.getData();
      this.getbillDay();
      this.getDataBuyer();
      this.getDataCus();
    });
  },
  methods: {
    getbillDay() {
      var _this = this;
      var date = new Date();
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid
      };
      this.Ajax.post("StatisticsBill", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          _this.dayStatistics = resp.Datas[0];
          _this.weekStatistics = resp.Datas[1];
          _this.monthStatistics = resp.Datas[2];
        }
      });
    },
    getbillMonth() {
      var _this = this;
      var date = new Date();
      var querydate = date.getFullYear() + "-" + (date.getMonth() + 1);
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid,
        Date: querydate
      };
      this.Ajax.post("StatisticsBill", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          _this.monthStatistics = resp.Datas[0];
        }
      });
    },
    getDataBuyer() {
      var _this = this;
      var date = new Date();
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid,
        month: date.getMonth() + 1,
        year: date.getFullYear(),
        day: ""
      };
      this.Ajax.post("CustomerSaleTopApi", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          resp.Datas.forEach(element => {
            _this.BuyerAmount.push(element.DetailSum);
            _this.BuyerBill.push(element.Qty);
            _this.BuyerName.push(element.MedName);
          });
          _this.echarts();
        }
      });
    },
    getDataCus() {
      var _this = this;
      var date = new Date();
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid,
        month: date.getMonth() + 1,
        year: date.getFullYear(),
        day: ""
      };
      this.Ajax.post("CustomerQtyTopApi", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          resp.Datas.forEach((element,index) => {
             var ll = {
              name: element.MedName,
              value: element.DetailSum,
            };
            _this.CusData.push(ll);
          });
            _this.cirCharts();
        }
      });
    },
    getData() {
      var _this = this;
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid
      };
      this.Ajax.post("BusinessAnalysisApi", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          _this.orderAnalysis = resp.Datas;
        }
      });
    },
    goList() {
      this.$router.push({
        path: "/indexMan/list",
        query: {
          type: this.classfiy
        }
      });
    },
    swiper() {
      var _this = this;
      var mySwiper = new Swiper(".index-swiper", {
        loop: false,
        pagination: ".swiper-pagination",
        paginationType: "bullets",
        paginationClickable: true,
        paginationHide: true
      });
    },
    echarts() {
      var self = this;
      var myChart = echarts.init(document.getElementById("anaCharts"));
      var labelShow = {
              normal: {
                  show: true,
                  position: 'top',
                  color:'#333333'
              }
          };
      var option1;
      option1 = {
        color: ["#f3b0ac", "#cbeff1"],
        legend: {
          data: ["销量(单)", "金额(元)"],
          selected: {
            '销量(单)': true,
            '金额(元)': false
          }
        },
        calculable: true,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: self.BuyerName
            // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series:[
          {
            name: "销量(单)",
            type: "bar",
            label: labelShow,
            barMinHeight: 5,
            data: self.BuyerBill
            // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: "金额(元)",
            type: "bar",
            label: labelShow,
            barMinHeight: 5,
            data: self.BuyerAmount
            // data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }
        ]
      };
      myChart.setOption(option1);
    },
    cirCharts() {
      var self =this;
      var myChart = echarts.init(document.getElementById("cirCharts")),
        option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c}",
            confine: true
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["40%", "60%"],
              avoidLabelOverlap: false,
              itemStyle: {
                normal: {
                  label: {
                    formatter: function(params) {
                      var newParamsName = "";
                      var paramsNameNumber = params.name.length;
                      var provideNumber = 5;
                      var rowNumber = Math.ceil(
                        paramsNameNumber / provideNumber
                      );
                      if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                          var tempStr = "";
                          var start = p * provideNumber;
                          var end = start + provideNumber;
                          if (p == rowNumber - 1) {
                            tempStr = params.name.substring(
                              start,
                              paramsNameNumber
                            );
                          } else {
                            tempStr = params.name.substring(start, end) + "\n";
                          }
                          newParamsName += tempStr;
                        }
                      } else {
                        newParamsName = params.name;
                      }
                      return newParamsName + "\n" + params.value;
                    }
                  }
                }
              },
              data: self.CusData
            }
          ],
          color: [
            "#eb444f",
            "#f7c944",
            "#28c660",
            "#4cacdf",
            "#f5bebc",
            "#75cadb",
            "#eb444f"
          ]
        };
      myChart.setOption(option);
    }
  }
};
</script>